<template>
  <div>
    <n-grid :x-gap="5">
      <n-grid-item :span="24">
        <n-grid :x-gap="5" :y-gap="5" style="height: 165px">
          <n-grid-item :span="12"   v-for="image in limitImage">
           <n-space justify="center">
              <n-image
                  width="80"
                  :lazy="true"
                  :class="{ 'selected': props.row.imageUrl === image }"
                  :object-fit="'cover'"
                  :src="fileFunction.getViewFilePathByUserFileId(image)"
              />
           </n-space>
          </n-grid-item>
        </n-grid>
        <n-grid-item :span="24">
          <n-button secondary  @click="imageModelShow=true" style="margin-top: 20px" type="primary" block>共有{{props.row?.imageList.length}}图片 重新选择</n-button>
        </n-grid-item>
      </n-grid-item>
    </n-grid>

    <n-modal v-model:show="imageModelShow">
      <n-card
          style="width: 500px"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
      >
        <img-model :row="props.row" :selectFunction="updateImage"></img-model>
      </n-card>
    </n-modal>
  </div>

</template>

<script setup lang="ts">
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {NButton} from "naive-ui";
import {storyController} from '@/api/story/story.api'
import {computed, ref} from "vue";
import {useMessage } from 'naive-ui';
import imgModel from '@/views/pages/create/novel/components/imgModel.vue'

const imageModelShow = ref(false)
const loading = ref(false)
const props = defineProps({
    row: {
        type: Object,
        default: () => {
            return {}
        }
    },
  updateStoryBoardByNum:{
    type: Function,
    default: () => {

    }
  }
})

const limitImage = computed(() => {
  Array.isArray(props.row.imageList) ? props.row.imageList : [];
  let showImageList = props.row.imageList.slice(0, 4)
  if (props.row.imageUrl &&  showImageList.indexOf(props.row.imageUrl) === -1) {
    // showImageList.push(props.row.imageUrl)
    showImageList.unshift(props.row.imageUrl)
  }
  // 返回最多4个元素的数组
  return showImageList.slice(0, 4);
})

const updateImage = ()=>{
  const orderNums = [props.row.orderNum]
  props.updateStoryBoardByNum(orderNums)
}
</script>
<style>
.selected {
  border: 3px solid #8250df;
}
</style>
